<template>
  <div class="userpage">
    <!-- 左侧内容区域 -->
    <div class="userpage-left">
      <div class="userpage-left-title">个人中心</div>
      <div class="userpage-left-ul">
        <div
          class="userpage-left-li"
          :class="[{ 'userpage-left-li_select': item.value === selectUser }]"
          v-for="item in userList"
          @click="handChange(item)"
          :key="item.value"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="userpage-right">
      <div class="userpage-right__title">我的信息</div>
      <!-- 内容 -->
      <div
        class="userpage-right__box"
        :class="[
          {
            'userpage-height': selectUser === 'update',
            'userpage-height1': selectUser === 'password',
          },
        ]"
        v-if="selectUser !== 'info'"
      >
        <div class="userpage-right__box-title">
          {{ selectObj.name }}
        </div>
        <div class="userpage-popup__temp" v-if="selectUser === 'password'">
          <div>原密码</div>
          <el-input
            type="password"
            class="userpage-ipt__userpage"
            v-model="password1"
            placeholder="请输入您原密码"
          ></el-input>
        </div>
        <!-- 密码 -->
        <div class="userpage-popup__temp" v-if="selectUser === 'password'">
          <div>新密码</div>
          <el-input
            type="password"
            class="userpage-ipt__userpage"
            v-model="password2"
            placeholder="请输入您新密码"
          ></el-input>
        </div>
        <!-- 确认 -->
        <div class="userpage-popup__temp" v-if="selectUser === 'password'">
          <div>重复新密码</div>
          <el-input
            type="password"
            class="userpage-ipt__userpage"
            v-model="password3"
            placeholder="请再次输入您新密码"
          ></el-input>
        </div>
        <!-- 密码 -->
        <div class="userpage-popup__temp" v-if="selectUser === 'update'">
          <div>修改头像</div>

          <div class="userpage-popup__temp-holder">请上传头像</div>
          <el-upload
            name="avatarfile"
            :headers="headers"
            action="http://101.42.6.163:8686/system/user/profile/avatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            class="userpage-popup__temp-holder"
          >
            <div class="userpage-popup__temp-bor">
              <img src="./assets/images/plus.png" alt="" />
            </div>
          </el-upload>
        </div>

        <!-- 确认 -->
        <div class="userpage-popup__temp" v-if="selectUser === 'update'">
          <div>修改昵称</div>
          <el-input
            type="text"
            class="userpage-ipt__userpage"
            v-model="nickName"
            placeholder="请再次输入昵称"
          ></el-input>
        </div>
        <!-- 注册 -->
        <div class="userpage-popup__userpagebox" @click="handSubmit">保存</div>
      </div>
      <div class="userpage-right__box userpage-right__info" v-else>
        <!-- <img
          class="userpage-right__info-img"
          src="../../assets/images/geren.png"
          alt=""
        /> -->
        <div class="userpage-right__info-img">
          <i class="el-icon-user" v-if="!userData.avatar"></i>
          <img  class="user-img" v-if="userData.avatar" :src="'http://101.42.6.163:8686'+userData.avatar" />
        </div>
        <div class="userpage-right__info-ul">
          <div class="userpage-right__info-left">
            <div>昵称</div>
            <!-- <div>账户有效期至</div>
            <div>所属机构</div> -->
          </div>
          <div class="userpage-right__info-right">
            <div>{{ userData.nickName }}</div>
            <!-- <div>{{ getDate(new Date()) }}</div>
            <div>北京尚策互动科技有限公司</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo, updatePwd,changeProfile } from "@/api/modules/user";
import dateUtils from "../../utils/dateUtils.js";
export default {
  name: "UserPage",
  data() {
    return {
      selectUser: "update",
      headers: {},

      userList: [
        {
          name: "我的信息",
          value: "info",
        },
        {
          name: "编辑资料",
          value: "update",
        },
        {
          name: "修改密码",
          value: "password",
        },
      ],
      selectObj: {},
      password1: "",
      password2: "",
      password3: "",
      userData: {}, 
      nickName:""
    };
  },
  mounted() {
    this.getInfoHandle();
    this.headers.Authorization = "Bearer " + localStorage.getItem("token");
    this.getSelectObj(this.selectUser);
  },
  methods: {
    handleAvatarSuccess(res, file) {
        if(res.code==200){
          this.$message.success("修改成功");
          this.getInfoHandle()
          
        }else{
          this.$message.error(res.msg);
        }
      },
    updatePwdHandle() {
      updatePwd(
        `oldPassword=${this.password1}&newPassword=${this.password2}`
      ).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功，请重新登录");
          sessionStorage.clear();
          // 跳转到登录页面
          window.location.href = '/login#/login'
          location.reload();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getInfoHandle() {
      getInfo().then((res) => {
        if (res.code == 200) {
          this.userData = res.user;
          localStorage.setItem('userData', JSON.stringify(this.userData));
          this.$bus.$emit('changeAvatar',true)
        }
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },
    getSelectObj(item) {
      let obj = this.userList.find((c) => c.value === item);
      this.selectObj = obj;
    },
    handChange(item) {
      if(item.value=='info'){
        this.getInfoHandle();
      }
      this.selectUser = item.value;
      this.getSelectObj(this.selectUser);
    },
    handSubmit() {
      if (this.selectUser == "password") {
        if (!this.password1) {
          this.$message.error("请输入原密码");
          return;
        }
        if (!this.password2) {
          this.$message.error("请输入新密码");
          return;
        }
        if (this.password2 !== this.password3) {
          this.$message.error("两次输入的密码不一样");
          return;
        }
        this.updatePwdHandle();
      }else{
        if (!this.nickName) {
          this.$message.error("请输入昵称");
          return;
        }
        changeProfile({
          nickName:this.nickName
        }).then(res=>{
          if (res.code == 200) {
          this.$message.success("修改昵称成功");
          this.getInfoHandle()
        } else {
          this.$message.error(res.msg);
        }
        })
      }
      
    },
  },
};
</script>

<style lang="scss">
.userpage {
  .userpage-ipt__userpage {
    .el-input__inner {
      border: none !important;
      background: transparent !important;
      height: 24px;
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.userpage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .userpage-left {
    width: 325px;
    height: 100%;
    background: #fff;
    padding: 24px;
    box-sizing: border-box;
    .userpage-left-title {
      height: 56px;
      width: 100%;
      border-bottom: 1px solid #e7e7e7;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #313131;
      line-height: 16px;
      padding-top: 16px;
    }
    .userpage-left-ul {
      height: calc(100% - 56px);
      width: 100%;
      padding-top: 24px;
      .userpage-left-li {
        height: 40px;
        width: 100%;
        padding: 12px 0 0 16px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 16px;
        height: 40px;
        box-sizing: border-box;
        cursor: pointer;
      }
      .userpage-left-li_select {
        border-radius: 8px;
        width: 100%;
        background: #f4f5ff;
      }
    }
  }
  .userpage-right {
    flex: 1;
    height: 100%;
    background: url("./assets/images/bk.png") no-repeat;
    background-size: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: relative;
    .userpage-right__title {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #313131;
      line-height: 23px;
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 1;
    }
    .userpage-right__box {
      width: 436px;
      border-radius: 8px;
      box-sizing: border-box;
      margin-top: 80px;
      padding: 24px;
      background: #fff;
    }
    .userpage-right__info {
      height: 299px !important;
      padding: 50px 0 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      .userpage-right__info-img {
        width: 68px;
        min-height: 68px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: #4c56bb;
        font-size: 32px;
        margin-bottom: 24px;
        .user-img{
          width: 68px;
          height: 68px;
          border-radius: 50%;
        }
      }
      .userpage-right__info-ul {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 24px;
        box-sizing: border-box;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 16px;
      }
      .userpage-right__info-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        margin-right: 24px;
        height: 100%;
        width: 40%;
      }
      .userpage-right__info-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 100%;
        flex: 1;
      }
    }

    .userpage-right__box-title {
      width: 100%;
      font-size: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 23px;
      text-align: center;
      margin-bottom: 24px;
    }
    .userpage-popup__temp {
      width: 388px;
      height: 70px;
      border-radius: 8px;
      background: #f4f5f6;
      margin-bottom: 24px;
      padding: 12px 24px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      > div:nth-child(1) {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 14px;
        margin-bottom: 8px;
      }
      .userpage-popup__temp-bor {
        position: absolute;
        right: 19px;
        top: 16px;
        width: 38px;
        height: 38px;
        background: #dddfff;
        border-radius: 50%;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        & > img {
          width: 24px;
          height: 24px;
        }
      }
      .userpage-popup__temp-holder {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #bababa;
        line-height: 16px;
        padding: 0 15px;
        box-sizing: border-box;
        height: 24px;
        line-height: 24px;
      }
    }

    .userpage-popup__userpagebox {
      width: 388px;
      height: 60px;
      background: #4c56bb;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      cursor: pointer;
      margin-top: 24px;
      &:hover {
        background: #4c56bb80 !important;
      }
    }
  }
  .userpage-height {
    height: 348px !important;
  }
  .userpage-height1 {
    height: 442px !important;
  }
}
</style>
